<template>
  <div class="edit-column-model edit-column-modelcs">
    <div class="edit-header">
      <span class="mode-text">内容模型：{{ route.query.name }}</span>
      <a-button @click="saveColumnModel" style="width: 60px" type="primary" :disabled="!btnPerm.includes('saveAble')">
        保存
      </a-button>
    </div>

    <div class="main" id="editContentModel">
      <div class="left-box">
        <a-collapse v-model:activeKey="activeKey" :bordered="false" v-for="(item, index) in optionsObj.componentList"
          :key="index">
          <template #expandIcon="{ isActive }">
            <i v-if="!isActive" class="iconfont icon-caret-right" style="
                font-size: 24px;
                color: #000000;
                height: 24px;
                display: flex;
                flex-direction: row;
                align-items: center;
              " />
            <i v-else class="iconfont icon-caret-down" style="
                font-size: 24px;
                color: #000000;
                height: 24px;
                display: flex;
                flex-direction: row;
                align-items: center;
              " />
          </template>
          <a-collapse-panel :key="index" :header="item.header" :style="{
            background: '#fff',
            'margin-top': '24px',
            border: 'none',
            overflow: 'hidden',
          }">
            <draggable :list="item.list" ghost-class="ghost" handle=".move" filter=".forbid" :force-fallback="true"
              chosen-class="chosenClass" animation="300" @start="onStartLeft" @end="onEndLeft" :group="options.group"
              :fallback-class="true" :fallback-on-body="true" :touch-start-threshold="50" :fallback-tolerance="50"
              :move="onMoveLeft" :sort="false" class="drag-box">
              <template #item="{ element }">
                <div class="comp-item move" :class="element.column ? 'column-system' : ''">
                  <i class="iconfont drag-icon" :class="element.icon" style="font-size: 16.5px">
                  </i>
                  <div class="text">{{ element.name }}</div>
                </div>
              </template>
            </draggable>
          </a-collapse-panel>
        </a-collapse>
      </div>
      <div class="middle-box">
        <div style="height: calc(100% - 100px); overflow: auto; padding-top: 12px;margin-top: 12px;"
          class="dragContent_left">
          <a-form autoComplete="off">
            <draggable :list="contentComps_left" :class="'draggable-content'" ghost-class="edit-ghost" handle=".edit"
              filter=".forbid" :force-fallback="true" chosen-class="edit-chosenClass" animation="300" @start="onStart"
              @end="onEnd" group="itxst" @add="handleWidgetAdd" :fallback-class="true" dragClass="dragClass"
              :fallback-on-body="true" :touch-start-threshold="50" :fallback-tolerance="50" :move="onMove">
              <template #item="{ element, index }">
                <div v-if="(element.componentName && !element.item_list && !element.upload_list && !element.uedit_list)"
                  @click="selectedComp(element, '', '', 1)" class="edit-item edit">
                  <div class="z-preview" :class="activeCompId == element.id ? 'activeComp' : ''">
                    <component :is="comps[element.componentName]" :element="element" v-if="element.formSetting"
                      :key="element">
                    </component>
                    <div class="options">
                      <div class="deleteEle" v-if="excludeName(element)">
                        <i class="iconfont" @click.stop.prevent="deleteItem(element, '', index, 1)"
                          style="font-size: 16px; margin-left: 0">&#xe8e2;
                        </i>
                      </div>
                      <div class="moveEle_up" v-if="activeCompId === element.id && index > 0">
                        <a-tooltip>
                          <template #title>向上移</template>
                          <i class="iconfont icon-a-Moveup" @click.stop.prevent="moveUp_dwon(element, '', index, '0')"
                            style="font-size: 16px; margin-left: 0">
                          </i>
                        </a-tooltip>
                      </div>
                      <div class="moveEle_down" v-if="activeCompId === element.id">
                        <a-tooltip>
                          <template #title>向下移</template>
                          <i class="iconfont icon-a-movedown" @click.stop.prevent="moveUp_dwon(element, '', index, '1')"
                            style="font-size: 16px; margin-left: 0">
                          </i>
                        </a-tooltip>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="edit edit_upload" id="upload_list" v-else-if="(element.upload_list)">
                  <span class="title_upload_list" v-if="element.upload_list[0]">{{
                    getLabel(element.upload_list[0].componentName) }}</span>
                  <div class="deleteEle_mutip">
                    <i class="iconfont" @click.stop.prevent="deleteItem(element, '', index, 1)"
                      style="font-size: 16px; margin-left: 0">&#xe8e2;
                    </i>
                  </div>
                  <draggable :list="element.upload_list" class="draggable-left_upload_list"
                    ghost-class="edit-ghost_upload_list" handle=".edit_upload_list" filter=".forbid"
                    :force-fallback="true" chosen-class="edit-chosenClass_upload_list" animation="300" @start="onStart"
                    @end="" :fallback-class="true" dragClass="dragClass_upload_list" :fallback-on-body="true"
                    :touch-start-threshold="50" :fallback-tolerance="50">
                    <template #item="{ element: ele, index: index_list }">

                      <div id="edit-item-upload-list" class="edit_upload_list"
                        @click.stop.prevent="selectedComp(ele, index_list, index, 1, 'upload_list')">

                        <div class="z-preview z-preview_upload_list"
                          :class="activeCompId == ele.id ? 'activeComp_upload_list' : ''">
                          <component :is="comps[ele.componentName]" :element="ele" v-if="ele.formSetting" :key="element">
                          </component>
                          <div class="options">
                            <div class="deleteEle">
                              <i class="iconfont" @click.stop.prevent="deleteItem(ele, index_list, index, 1)"
                                style="font-size: 16px; margin-left: 0">&#xe8e2;
                              </i>
                            </div>
                          </div>
                        </div>
                      </div>
                    </template>
                  </draggable>
                </div>
                <div :class="element.item_list ? 'edit-item_list_id edit' : 'edit'" v-else-if="element.item_list">
                  <div class="z-preview z-preview_list" v-for="(ele, index_list) in element.item_list"
                    @click.stop.prevent="selectedComp(ele, index_list, index, 1, 'item_list')"
                    :class="activeCompId == ele.id ? 'activeComp_list' : ''">
                    <component :is="comps[ele.componentName]" :element="ele" v-if="ele.formSetting"
                      :key="element.item_list"></component>
                    <div class="options">
                      <div class="deleteEle" v-if="activeCompId === ele.id && excludeName(ele)">
                        <i class="iconfont" @click.stop.prevent="deleteItem(ele, index_list, index, 1)"
                          style="font-size: 16px; margin-left: 0">&#xe8e2;
                        </i>
                      </div>
                      <div class="moveEle" v-if="activeCompId === ele.id"
                        :style="index_list == 1 ? 'left:-12px' : 'right:-12px'">
                        <a-tooltip>
                          <template #title>{{
                            index_list == 0 ? "右移" : "左移"
                          }}</template>
                          <i class="iconfont icon-move" @click.stop.prevent="moveItem(ele, index_list, index)"
                            style="font-size: 16px; margin-left: 0">
                          </i>
                        </a-tooltip>
                      </div>
                      <div class="moveEle_up" v-if="activeCompId === ele.id">
                        <a-tooltip>
                          <template #title>向上移</template>
                          <i class="iconfont icon-a-Moveup" @click.stop.prevent="
                            moveUp_dwon(element, index_list, index, '0')
                            " style="font-size: 16px; margin-left: 0">
                          </i>
                        </a-tooltip>
                      </div>
                      <div class="moveEle_down" v-if="activeCompId === ele.id">
                        <a-tooltip>
                          <template #title>向下移</template>
                          <i class="iconfont icon-a-movedown" @click.stop.prevent="
                            moveUp_dwon(element, index_list, index, '1')
                            " style="font-size: 16px; margin-left: 0">
                          </i>
                        </a-tooltip>
                      </div>
                    </div>
                  </div>
                </div>
                <div v-else-if="(element.uedit_list)"
                  :class="element.uedit_list ? 'edit-item_contents_id contents edit' : 'edit'">
                  <div class="downLoad_pic">
                    <component :is="comps['isDownloadImag']" :element="settingObj" :key="element.uedit_list">
                    </component>
                  </div>
                  <a-tabs v-model:activeKey="contentActiveKey" type="editable-card" @edit="onEdit">
                    <a-tab-pane v-for="( ele, uedit_list ) in  element.uedit_list " :key="ele.key" :tab="ele.tabLabel"
                      :closable="ele.closable">
                      <div class="z-preview z-preview_uedit_list"
                        @click.stop.prevent="selectedComp(ele, uedit_list, index, 1, 'uedit_list')"
                        :class="activeCompId == ele.id ? 'activeComp_uedit_list' : ''">
                        <component :is="comps[ele.componentName]" :element="ele" v-if="ele.formSetting"></component>
                        <div class="options">
                          <div class="deleteEle" style="top:-44px">
                            <i class="iconfont" @click.stop.prevent="deleteUedit(ele, uedit_list, index, 1)"
                              style="font-size: 16px; margin-left: 0">&#xe8e2;
                            </i>
                          </div>
                        </div>
                      </div>
                    </a-tab-pane>
                  </a-tabs>
                </div>
              </template>
            </draggable>
          </a-form>
        </div>
        <div style="height: calc(100% - 100px); overflow: auto" class="dragContent_right">
          <a-form autoComplete="off" style="height:100%">
            <draggable :list="contentComps_right" class="draggable-content draggable-right" ghost-class="edit-ghost"
              handle=".edit" filter=".forbid" :force-fallback="true" chosen-class="edit-chosenClass" animation="300"
              @start="onStart" @end="" group="itxst" :fallback-class="true" dragClass="dragClass" :fallback-on-body="true"
              :move="onMoveRight">
              <template #item="{ element, index }">
                <div class="edit-item edit" v-if="element.componentName" @click="selectedComp(element, '', index, 2)">
                  <div class="z-preview" :class="activeCompId == element.id ? 'activeComp' : ''"
                    @click.stop.prevent="selectedComp(element, '', '', 2)">
                    <div class="deleteEle" v-if="activeCompId === element.id && excludeName(element)">
                      <i class="iconfont" @click="deleteItem(element, '', index, 2)"
                        style="font-size: 16px; margin-left: 0">&#xe8e2;
                      </i>
                    </div>
                    <component :is="comps[element.componentName]" :element="element" v-if="element.formSetting"
                      :key="element">
                    </component>
                  </div>
                </div>
              </template>
            </draggable>
            <div class="tip-model" v-if="contentComps_right.length <= 0">
              <i class="iconfont icon-drag" style="
              font-size: 20px;
              color: rgba(0, 0, 0, 0.85);
              margin: 0 12px;
              height: 20px;
              display: flex;
              flex-direction: row;
              align-items: center;
            " />
              拖拽组件到该区域
            </div>
          </a-form>
        </div>
        <div class="tip-model" v-if="contentComps_left.length <= 0 && contentComps_right.length <= 0">
          <i class="iconfont icon-drag" style="
              font-size: 20px;
              color: rgba(0, 0, 0, 0.85);
              margin: 0 12px;
              height: 20px;
              display: flex;
              flex-direction: row;
              align-items: center;
            " />
          拖拽组件到该区域
        </div>
      </div>
      <div class="right-box">
        <div class="attr-setting">组件属性设置</div>
        <div class="settings-comp">
          <component :is="comps[settingName]" :currentComp="currentComp" v-if="currentComp"></component>
        </div>
      </div>
    </div>
  </div>
</template>



<script lang="ts" setup>
import { ref, reactive, onMounted, nextTick, computed } from "vue";
import {
  comps,
  configSetting,
  formConfigSetting,
} from "@/components/draggable/exportComp";
import draggable from "vuedraggable";
import { Modal, message } from "ant-design-vue";
import { randomWord } from "@/utils/common";
import request from "@/api/index";
import { dataSourceType } from "@/type";
import { useRoute } from "vue-router";
import { defaultLeftComp } from './defaultLeftComp'
import settingObjJson from './settingObjJson'
import { cloneDeep } from "lodash";
import dayjs from 'dayjs';
import { routerPerm } from '@/utils/common';
const route = useRoute();
//props
const props = defineProps({
  options: {
    type: Object,
    default: {} as dataSourceType,
  },
  detailData: {
    type: Array,
    default: [],
  },
});

const settingObj: dataSourceType = reactive(settingObjJson)


//data
const btnPerm = ref<any[]>([]);
const isMoving = ref(false);
let detailData = reactive<dataSourceType>({});
let saveData = reactive<dataSourceType>({
  contentComps_left: [],
  contentComps_right: [],
});
let optionsObj = reactive<any>({});
const activeKey = ref([]);
const settingName = ref<string>("");
const isOpenRein = ref<boolean>(true);
const activeCompId = ref<string | number>("");
const contentActiveKey = ref<string | number>(0);
const currentComp = ref<dataSourceType>({});
// 判断在移动过程中是否拖到右侧
const is2Right = ref<Boolean[]>([]);
//头部切换选项
const tabsList = [
  { tabName: "基本设置", key: 1, name: "Base" },
  { tabName: "扩展设置", key: 2, name: "Extend" },
  { tabName: "SEO设置", key: 3, name: "Seo" },
];
let contentComps_left = ref<any[]>([]);
contentComps_left.value = cloneDeep(defaultLeftComp);
let contentComps_right = ref<any[]>([
  // { componentName: "parentColumn", },
  // { componentName: "columnName", },
  // { componentName: "accessPath", },
]);




//method

const getLabel = (Cname: any) => {
  let name = Cname == 'singleImgUpload' ? '单图上传' :
    Cname == 'multiImgUpload' ? '多图上传' :
      Cname == 'videoUpload' ? '视频上传' :
        Cname == 'audioUpload' ? '音频上传' : '';
  return name;
}
const addContents = () => {
  let list = JSON.parse(JSON.stringify(contentComps_left.value));
  let contentIndex: number = -1
  list.forEach((item: any, index: number) => {
    if (item.componentName === '') {
      contentIndex = index
    }
  })
  if (contentIndex > -1) {
    const temp = contentComps_left.value[contentIndex]
    const item = temp.uedit_list[0]
    temp.uedit_list.push({
      ...item, key: temp.uedit_list.length, closable: true,
      id: randomWord(false, 3, 3), tabLabel: temp.uedit_list.length > 0 ? `'content'${temp.uedit_list.length}` : 'content'
    });
  }
};

const remove = (targetKey: string) => {
  let contentIndex: number = -1
  let list = JSON.parse(JSON.stringify(contentComps_left.value));
  list.forEach((item: any, index: number) => {
    if (item.componentName === '') {
      contentIndex = index
    }
  })
  const temp = contentComps_left.value[contentIndex].uedit_list
  let lastIndex = 0;
  temp.length && temp.forEach((item: any, index: number) => {
    if (item.key === targetKey) {
      lastIndex = index - 1;
    }
  });

  contentComps_left.value[contentIndex].uedit_list = contentComps_left.value[contentIndex].uedit_list.filter((item: any) => item.key !== targetKey);
  if (temp.length && contentActiveKey.value === targetKey) {
    if (lastIndex >= 0) {
      contentActiveKey.value = temp[lastIndex].key;
    } else {
      contentActiveKey.value = temp[0].key;
    }
  }
};

const onEdit = (targetKey: string | MouseEvent, action: string) => {
  if (action === 'add') {
    addContents();
  } else {
    remove(targetKey as string);
  }
};

//添加id
const addId = () => {
  setFormSettings();
  optionsObj?.componentList.forEach((item: dataSourceType) => {
    item.list.forEach((listItem: dataSourceType) => {
      listItem.id = randomWord(false, 3, 3);
    });
  });
};
//当前点击组件及组件设置信息传递
const selectedComp = (e: any, data_index: any, index: any, tab: number, type?: string) => {
  currentComp.value = [];
  if (data_index === "") {
    if (tab === 1) {
      currentComp.value = contentComps_left.value.find((item: dataSourceType) => {
        return item.id === e.id;
      });
    } else {
      currentComp.value = contentComps_right.value.find((item: dataSourceType) => {
        return item.id === e.id;
      });
    }
  } else if (data_index !== '' && type) {
    if (tab === 1) {
      currentComp.value = contentComps_left.value[index][type][data_index];
    }
  }
  activeCompId.value = e.id;
  settingName.value = `${e.componentName}Settings`;
};

////左侧栏拖拽开始的事件
const onStartLeft = (e: any) => { };

//左侧栏拖拽结束的事件
const onEndLeft = (e: any) => {
  nextTick(() => {
    let ele = document.querySelectorAll(".comp-item");
    ele.forEach((item: any) => {
      item.style.display = "";
    });
  });
  if (isMoving.value) {
    isMoving.value = false;
    message.error("组件已存在！");
  } else {
    setFormSettings();
  }
  nextTick(() => {
    let list = JSON.parse(JSON.stringify(contentComps_left.value));
    let contentIndex: number = -1
    list.forEach((item: any, index: number) => {
      if (item.componentName === 'contents') {
        contentIndex = index
      }
    })

    if (contentIndex > -1) {
      let temp = {
        componentName: "",
        uedit_list: [list[contentIndex]],
        settingObj: {}
      }
      temp.uedit_list && temp.uedit_list.forEach((item: any, index: number) => {
        item.key = index
        item.closable = false
        item.id = randomWord(false, 3, 3)
        item.tabLabel = index > 0 ? `content${index + 1}` : 'content'
      })
      temp.settingObj = settingObj
      contentComps_left.value[contentIndex] = temp;
      // contentComps_left.value.splice(contentIndex, 0, settingObj)

      contentActiveKey.value = temp.uedit_list[0].key
    }
  })

};

//设置组件属性
const setFormSettings = () => {
  let arr: dataSourceType[] = [];
  let arr1: dataSourceType[] = [];
  arr = cloneDeep(contentComps_left.value);
  arr1 = cloneDeep(contentComps_right.value);
  arr.forEach((item: dataSourceType, index: number) => {
    if (item.upload_list) {
      item.upload_list.forEach((data: any, index_data: number) => {
        if ((data.id?.length <= 3 || !data.id) && data.componentName) {
          console.log(data, item, 'data, item');
          let params = randomWord(false, 4, 4);
          data.id = params;
          data.param = item.uniqe ? data.componentName : data.componentName + params;
          configSetting.forEach((comp: dataSourceType) => {
            if (comp.param === data.componentName) {
              arr[index].upload_list[index_data] = cloneDeep(Object.assign(
                cloneDeep(comp), data));
            }
          });
          arr[index].upload_list[index_data].formSetting = JSON.parse(
            JSON.stringify(
              formConfigSetting.find((comp: dataSourceType) => {
                comp.children[1].value = item.uniqe ? data.componentName : data.componentName + params;
                return (
                  comp &&
                  comp.type === `${data.componentName}Settings` && (comp.id = data.id)
                );
              })
            )
          );
        }
      });
    } else if (item.uedit_list) {
      item.uedit_list.forEach((data: any, index_data: number) => {
        if ((data.id?.length <= 3 || !data.id) && data.componentName) {
          data.id = randomWord(false, 4, 4);
          let params = '';
          configSetting.forEach((comp: dataSourceType) => {
            if (comp.param === data.componentName) {
              arr[index].uedit_list[index_data] = cloneDeep(Object.assign(comp, data));
              params = comp.param;
            }
          });
          arr[index].uedit_list[index_data].formSetting = JSON.parse(
            JSON.stringify(
              formConfigSetting.find((comp: dataSourceType) => {
                comp.children[1].value = !item.uniqe ? params + randomWord(false, 4, 4) : params;
                return (
                  comp &&
                  comp.type === `${data.componentName}Settings` &&
                  (comp.id = data.id)
                );
              })
            )
          );
        }
      });

    } else {
      if ((item.id?.length <= 3 || !item.id) && item.componentName) {
        let params = randomWord(false, 4, 4);
        item.id = params;
        item.param = item.uniqe ? item.componentName : item.componentName + params
        configSetting.forEach((comp: dataSourceType) => {
          if (comp.param === item.componentName) {
            arr[index] = cloneDeep(Object.assign(cloneDeep(comp), item));
            params = item.uniqe ? item.componentName : item.componentName + params;
          }
        });
        arr[index].formSetting = JSON.parse(
          JSON.stringify(
            formConfigSetting.find((comp: dataSourceType) => {
              comp.children[1].value = item.uniqe ? item.componentName : item.componentName + params;
              return (
                comp &&
                comp.type === `${item.componentName}Settings` &&
                (comp.id = item.id)
              );
            })
          )
        );
      }
    }
  });
  arr1.forEach((item: dataSourceType, index: number) => {
    if (item.upload_list) {
      item.upload_list.forEach((data: any, index_data: number) => {
        if ((data.id?.length <= 3 || !data.id) && data.componentName) {
          data.id = randomWord(false, 4, 4);
          let params = '';
          configSetting.forEach((comp: dataSourceType) => {
            if (comp.param === data.componentName) {
              arr1[index].upload_list[index_data] = JSON.parse(
                JSON.stringify(Object.assign(comp, data))
              );
              params = comp.param;
            }
          });
          arr1[index].upload_list[index_data].formSetting = JSON.parse(
            JSON.stringify(
              formConfigSetting.find((comp: dataSourceType) => {
                comp.children[1].value = params + randomWord(false, 4, 4);
                return (
                  comp &&
                  comp.type === `${data.componentName}Settings` &&
                  (comp.id = data.id)
                );
              })
            )
          );
        }
      });
    } else {
      if ((item.id?.length <= 3 || !item.id) && item.componentName) {
        item.id = randomWord(false, 4, 4);
        let params = '';
        configSetting.forEach((comp: dataSourceType) => {
          if (comp.param === item.componentName) {
            arr1[index] = cloneDeep(Object.assign(cloneDeep(comp), item));
            params = comp.param;
          }
        });
        arr1[index].formSetting = JSON.parse(
          JSON.stringify(
            formConfigSetting.find((comp: dataSourceType) => {
              // 系统组件的参数值不可再变更
              comp.children[1].value = !item.uniqe ? params + randomWord(false, 4, 4) : params;
              return (
                comp &&
                comp.type === `${item.componentName}Settings` &&
                (comp.id = item.id)
              );
            })
          )
        );
      }
    }
  })
  nextTick(() => {
    saveData.contentComps_left = contentComps_left.value = cloneDeep(arr);
    saveData.contentComps_right = contentComps_right.value = cloneDeep(arr1);
  })
};
const onMoveLeft = (e: any) => {
  let movingComponentName = e.draggedContext.element.componentName;
  let uploadType = ["singleImgUpload", "multiImgUpload", "videoUpload", "audioUpload"]; // 需要合并的上传类组件
  if (uploadType.includes(movingComponentName)) {
    nextTick(() => {
      let isHasUpload = false;
      contentComps_left.value.forEach((item: any, index: number) => {
        if (
          item.uploadList?.length &&
          item.uploadList[0].componentName == movingComponentName
        ) {
          isHasUpload = true;
        } else {
          if (item.componentName == movingComponentName) {
            isHasUpload = true;
          }
        }
      });
      if (isHasUpload) {
        let ele = <HTMLImageElement>document.querySelector(".edit-ghost");
        if (ele) {
          ele.style.display = "none";
        }
      }
    });
  } else if (movingComponentName === 'contents') {
    nextTick(() => {
      let isHasUpload = false;
      contentComps_left.value.forEach((item: any, index: number) => {
        if (
          item.contents?.length &&
          item.contents[0].componentName == movingComponentName
        ) {
          isHasUpload = true;
        } else {
          if (item.componentName == movingComponentName) {
            isHasUpload = true;
          }
        }
      });
      if (isHasUpload) {
        let ele = <HTMLImageElement>document.querySelector(".edit-ghost");
        if (ele) {
          ele.style.display = "none";
        }
      }
    });
  }
  let result = true;
  const index = activeKey.value[0];
  const element = e.draggedContext.element;
  if (Number(index) === 1) {
    let arr = [];
    arr = floatLeftValue().concat(contentComps_right.value);
    if (
      arr.findIndex(
        (item) => element.uniqe == 1 && item.componentName == element.componentName
      ) !== -1
    ) {
      isMoving.value = true;
      result = false;
    }
  } else {
    isMoving.value = false;
    result = true;
  }
  console.log(isMoving.value, 'isMoving.value');
  return result;
};

const onStart = (e: any) => { };
const floatLeftValue = () => {
  let arr: any[] = []
  contentComps_left.value.forEach((data: any) => {
    if (data.upload_list) {
      // 上传类
      arr.push(...data.upload_list);

    } else if (data.uedit_list) {
      //正文类
      arr.push(...data.uedit_list);

    } else if (data.item_list) {
      // 合并类
      arr.push(...data.item_list)
    } else {
      arr.push(data);
    }
  })
  return arr;
}
//拖拽结束的事件
const onEnd = (e: any) => {
  if (isMoving.value) {
    isMoving.value = false
    message.error('该组件不可拖拽到右边！')
  } else {
    setFormSettings();
  }
  is2Right.value = [];
};
const handleWidgetAdd = (e: any, type: number) => {
  let uploadType = ["singleImgUpload", "multiImgUpload", "videoUpload", "audioUpload",]; // 需要合并的上传类组件
  let addComponentName = e.item.__draggable_context.element.componentName;
  if (uploadType.includes(addComponentName)) {
    let olduploadIndex: any = "";
    let newUploadIndex: any = "";
    let addItem: any = "";
    contentComps_left.value.forEach((item: any, index) => {
      if (
        item.upload_list?.length &&
        item.upload_list[0].componentName == addComponentName
      ) {
        olduploadIndex = index;
      }
    });
    contentComps_left.value.forEach((item: any, index: number) => {
      if (item.componentName == addComponentName) {
        if (olduploadIndex === "") {
          contentComps_left.value[index] = {
            upload_list: [e.item.__draggable_context.element],
          };
        } else {
          let element = e.item.__draggable_context.element;
          contentComps_left.value[olduploadIndex].upload_list.push(element);
          newUploadIndex = index;
        }
      }
    });
    if (newUploadIndex !== "") {
      contentComps_left.value.splice(newUploadIndex, 1);
    }
    let result = true;
    if (isMoving.value) {
      isMoving.value = false;
      message.error("该组件不可拖拽到右边！");
      result = false;
    } else {
      return true;
    }
    return result;
  }
};
const handleWidgetAdd_upload_list = (e: any) => {
  let addComponentName = e.item.__draggable_context.element.componentName;
}
const onMove = (e: any, item: any) => {
  is2Right.value.push(e.to.classList.value.includes("draggable-right")); // 判断是否拖往右侧
  let result = true;

  if (
    (e.draggedContext.element.item_list &&
      e.draggedContext.element.item_list.length || e.draggedContext.element.upload_list &&
      e.draggedContext.element.upload_list.length || e.draggedContext.element.uedit_list &&
      e.draggedContext.element.uedit_list.length) &&
    is2Right.value.includes(true)
  ) {
    isMoving.value = true;
    result = false;
  } else {
    isMoving.value = false;
    result = true;
  }
  return result;
};
const onMoveRight = (e: any, item: any) => { };
//复制组件
const copyItem = () => {
};

//排除固定的选项
const excludeName = (data: dataSourceType) => {
  if (!data.deleteAble) {
    return true;
  } else {
    return false;
  }
};
//操作组件
// 删除富文本
const deleteUedit = (data: dataSourceType, index_list: number | string, index: number, type: number) => {
  contentComps_left.value.splice(index, 1);
}
//删除组件
const deleteItem = (data: dataSourceType, index_list: number | string, index: number, type: number) => {
  let arr = [];
  if (type == 1) {
    arr = contentComps_left.value;
    if (index_list === "") {
      arr.splice(index, 1);
    } else {
      if (arr[index].item_list) {
        arr[index] = arr[index].item_list.filter((item: any) => {
          return item.id !== data.id;
        })[0];
      } else if (arr[index].upload_list) {
        arr[index].upload_list = arr[index].upload_list.filter((item: any) => {
          return item.id !== data.id;
        });
        if (!arr[index].upload_list.length) {
          arr.splice(index, 1);
        }
      }
    }
    contentComps_left.value = arr;
  } else {
    arr = contentComps_right.value;
    arr.splice(index, 1);
    contentComps_right.value = arr;
  }
  if (data.id == activeCompId.value) {
    // 如果删除的是选中的，则清空设置项
    currentComp.value = {};
    settingName.value = "";
  }
};
//移动组件
const moveItem = (data: dataSourceType, index_list: number | string, index: number) => {
  let arr = [];
  arr = contentComps_left.value;

  let temp = JSON.parse(JSON.stringify(arr[index].item_list[0]));
  arr[index].item_list[0] = arr[index].item_list[1];
  arr[index].item_list[1] = temp;
  contentComps_left.value = arr;
};
//往上往下移动组件
const moveUp_dwon = (
  data: dataSourceType,
  index_list: number | string,
  index: number,
  type: string | number
) => {
  let arr: any[] = [];
  arr = contentComps_left.value;
  //如果合并的是正在选中的，合并后应该清掉选中重新选择

  if (type == "0") {
    //表示往上移动
    // 检测上传类的不可合并（后续条件加上）
    if (arr[index - 1]?.item_list) {
      // 如果上方已经是合并了的，就不能再往上合并了
      message.error("不可往上合并了！");
      return;
    }
  } else {
    if (arr[index + 1]?.item_list) {
      // 如果上方已经是合并了的，就不能再往上合并了
      message.error("不可往下合并了！");
      return;
    }
  }

  if (index_list !== "") {
    //表明是已合并的组件
    if (type == index_list) {
      //只因造的数据type是 0，1.恰好和index_list索引对应，才能作为是否要换位置的条件，修改了type便不能作为判断条件了
      let temp = JSON.parse(JSON.stringify(arr[index].item_list[0]));
      arr[index].item_list[0] = arr[index].item_list[1];
      arr[index].item_list[1] = temp;
    }
    let temp = JSON.parse(JSON.stringify(arr[index].item_list[1]));
    arr[index] = arr[index].item_list[0];
    arr.splice(index, 0, temp);
  } else {
    //表明是未合并的组件,先判断是否能向上、向下合并；
    // 条件：上传类不能合并，正文不能合并 !element.item_list && !element.upload_list && !element.uedit_list
    let nextLastIndex = type == "0" ? index - 1 : index + 1;
    if (arr[nextLastIndex] && (arr[nextLastIndex].item_list || arr[nextLastIndex].upload_list || arr[nextLastIndex].uedit_list)) {
      let errMsg = type == "0" ? "不可往上合并了！" : "不可往下合并了！";
      type == "0" ? message.error(errMsg) : message.error(errMsg);
      return;
    }

    // 向上合并，占据第1位，向下合并占据第0位
    let item_list: dataSourceType[] = [];
    //不用管向上合并index-1不存在，已在dom中限制
    if (type == "0") {
      item_list = [
        JSON.parse(JSON.stringify(arr[index - 1])),
        JSON.parse(JSON.stringify(arr[index])),
      ];
      arr.splice(index - 1, 2, { item_list });
      currentComp.value = arr[index - 1].item_list[1];
    } else {
      item_list = [JSON.parse(JSON.stringify(arr[index])),
      JSON.parse(JSON.stringify(arr[index + 1]))];
      arr.splice(index, 2, { item_list });
      currentComp.value = arr[index].item_list[0];
    }

  }
  nextTick(() => {
    contentComps_left.value = arr;
  })

};

//保存模型组件
const saveColumnModel = () => {
  saveData.contentComps_left = cloneDeep(contentComps_left.value);
  saveData.contentComps_right = cloneDeep(contentComps_right.value);

  const enableJson = JSON.stringify(saveData, function (key, val) {
    if (typeof val === 'function') {
      return val + '';
    }
    return val;
  })
  const params = {
    enableJson,
    modelId: route.query.id,
  };
  request
    .fetchModelItemSava(params)
    .then((res: any) => {
      if (res.code == "00000 00000") {
        getDetail();
        message.success(res.message);
      } else {
        message.error(res.message);
      }
    })
    .catch((err: any) => {
      throw new Error(err);
    });
};

//获取详情
const getDetail = async () => {
  let params = {
    id: route.query.id,
  };
  const data = await request.fetchColumnModelDetail(params);

  nextTick(() => {
    detailData = JSON.parse(data.enableJson);
    detailData = detailData ? detailData : { contentComps_left: cloneDeep(defaultLeftComp), contentComps_right: [] };
    contentComps_left.value = []
    contentComps_right.value = []
    detailData.contentComps_left?.length && detailData.contentComps_left.forEach((item: dataSourceType) => {
      if (item?.param?.includes('dateTime') && item.value) {// 单独处理时间格式
        item.value = dayjs(item.value);
      }
      contentComps_left.value.push(cloneDeep(item));
    });
    detailData.contentComps_right?.length && detailData.contentComps_right.forEach((item: dataSourceType) => {
      if (item?.param?.includes('dateTime') && item.value) {// 单独处理时间格式
        item.value = dayjs(item.value);
      }
      contentComps_right.value.push(item)
    })
  })
}


const fetchReinsurance = async () => {
  props.options.componentList[1].list.splice(8, 1)
  nextTick(() => {
    optionsObj = props.options;
    addId();
  })
};

onMounted(() => {
  btnPerm.value = routerPerm();
  fetchReinsurance();
  getDetail();
})

</script>

<style lang="less" scoped>
.ant-form-horizontal .ant-form-item-control {
  flex: unset;
}

.edit-column-model {
  width: 100%;
  height: calc(100% - 88px);
  padding: 24px;
  background-color: #fff;
  overflow-y: hidden;

  .edit-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;

    .mode-text {
      font-size: 14px;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.85);
      line-height: 14px;
    }
  }

  .main {
    height: calc(100% + 54px);
    margin-top: 24px;
    display: flex;
    flex-direction: row;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    // 禁止文字被鼠标选中
    moz-user-select: -moz-none;
    -moz-user-select: none;
    -o-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;

    .left-box {
      height: calc(100% - 100px);
      overflow-y: auto;
      width: 248px;
      border-right: 1px solid rgba(0, 0, 0, 0.06);

      .drag-box {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;

        .comp-item {
          margin-top: 12px;
          border-radius: 2px;
          border: 1px solid rgba(0, 0, 0, 0.15);
          display: flex;
          flex-direction: row;
          align-items: center;
          width: 106px;
          padding-left: 12px;
          min-height: 27px;

          .text {
            margin-left: 8px;
            font-size: 14px;
            font-family: PingFang SC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(0, 0, 0, 0.85);
            line-height: 14px;
          }
        }

        .column-system {
          width: 106px;
        }

        .comp-item:hover {
          border: 1px dashed #1f6ded;
          cursor: move;

          .text {
            color: #1f6ded;
          }

          .drag-icon {
            color: #1f6ded;
          }
        }
      }
    }

    .middle-box {
      height: calc(100%);
      overflow: auto;
      flex: 1;
      min-width: 536px;
      padding: 12px 24px 0;
      position: relative;
      display: flex;
      background: rgba(0, 0, 0, 0.02);

      .dragContent_left {
        flex: 1;
        background: #fff;
      }

      .dragContent_right {
        width: 260px;
        margin-left: 24px;
        margin-top: 12px;
        background: #fff;
        position: relative;
      }

      .tip-model {
        position: absolute;
        top: 310px;
        left: 0px;
        width: 100%;
        height: 30px;
        border-radius: 2px;
        opacity: 1;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.85);
      }

      .draggable-content {
        height: calc(100%);
      }

      .edit-item {
        text-align: left;
        background-color: #fff;
        display: flex;
        flex-wrap: wrap;
        user-select: none;
        position: relative;
        padding: 0 12px;

        .item-delete {
          position: absolute;

          font-size: 25px;
        }
      }

      // .edit-item:first-child {
      //   margin-top: 12px;
      // }

      .edit-item:hover {
        cursor: move;
        position: relative;
        background-color: #fafafa;

        &::after {
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
          content: "";
          z-index: 100;
        }

        .options {
          display: block;
        }
      }

      .edit-item:active {
        cursor: move;
        position: relative;

        .z-preview {
          background-color: #edf7ff;
          height: 100%;
          width: 100%;
          position: relative;
        }
      }

      .z-preview {
        padding: 12px 0;
        position: relative;
        width: 100%;

        .ant-form-item {
          display: flex;
          flex-direction: column;

          .ant-form-item-label {
            width: auto;
            text-align: left;
          }
        }

        .options {
          display: none;
        }

        .deleteEle {
          position: absolute;
          right: 4px;
          top: 4px;
          width: 24px;
          height: 24px;
          padding: 0 8px;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          background: #ffffff;
          box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.07);
          border-radius: 50px;
          z-index: 902;
          cursor: pointer;

          .iconfont {
            line-height: 16px;
            color: rgba(0, 0, 0, 0.45);

            &:hover {
              color: rgba(0, 0, 0, 0.85);
            }
          }

          span {
            height: 14px;
            border: 1px solid rgba(0, 0, 0, 0.06);
          }
        }

        .moveEle {
          position: absolute;
          top: calc(50% - 12px);
          width: 24px;
          height: 24px;
          padding: 0 8px;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          background: #ffffff;
          box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.07);
          border-radius: 50px;
          z-index: 902;
          cursor: pointer;
        }

        .moveEle_up,
        .moveEle_down {
          position: absolute;
          left: calc(50% - 12px);
          width: 24px;
          height: 24px;
          padding: 0 8px;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          background: #ffffff;
          box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.07);
          border-radius: 50px;
          z-index: 2001;
          cursor: pointer;
        }

        .moveEle_up {
          top: -12px;
        }

        .moveEle_down {
          bottom: -12px;
        }
      }

      .edit-item>label {
        padding: 6px 10px;
        color: #333;
      }

      .edit-item>label:hover {
        cursor: move;
      }

      .edit-item>span {
        padding: 6px 10px;
        color: #666;
      }
    }

    .right-box {
      height: calc(100% - 100px);
      overflow-y: auto;
      width: 352px;
      padding-top: 24px;
      padding-left: 24px;
      border-left: 1px solid rgba(0, 0, 0, 0.06);
      font-size: 14px;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.85);
      line-height: 22px;
    }
  }

  .right-box {
    .ant-form-item {
      display: flex;
      flex-direction: column;
    }
  }
}

.contents {
  ::v-deep(.ant-form-item) {
    z-index: 10;
  }

  ::v-deep(.ant-form-item-label) {
    width: 120px;
    z-index: 10;
  }

  ::v-deep(.ant-col) {
    z-index: 10;
  }

  .z-preview {
    padding: 0 0 12px !important;
  }

  // .activeComp_list {
  //   position: relative;
  // }

  // .activeComp_list::after {
  //   position: absolute;
  //   content: '';
  //   top: 0;
  //   width: 100%;
  //   height: 100%;
  //   background-color: #edf7ff;
  //   z-index: 101;
  // }

}





::v-deep(.editor-container) {
  padding: 0 12px;
}

::v-deep(.ant-form-item) {
  margin-bottom: 0;
}

::v-deep(.ant-form-item-label) {
  width: 168px;
}

::v-deep(.ant-tabs-nav) {
  margin: 0 24px;
  z-index: 10;
}

::v-deep(.ant-collapse > .ant-collapse-item > .ant-collapse-header) {
  padding: 0;
}

::v-deep(.ant-collapse-content > .ant-collapse-content-box) {
  padding: 0 24px 0 0;
}

::v-deep(.ant-collapse > .ant-collapse-item > .ant-collapse-header .ant-collapse-arrow) {
  margin-right: 0px;
}

::v-deep(.ant-input:placeholder-shown) {
  // width: 304px;
}

.group {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-content: center;
  width: 32%;
  margin-right: 20px;
}

.chosenClass {
  height: max-content;
  width: max-content;
  display: flex;
  border: 1px solid #1ec6df;
}

.edit-chosenClass {
  opacity: 1;
  width: 100%;
  height: max-content;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  position: relative;
  justify-content: flex-start;
  list-style: none;
  font-size: 0;
  border-width: 0px !important;
  opacity: 0.2;

  .z-preview {
    width: auto;
  }

  .ant-form-item {
    display: flex;
    flex-direction: column !important;
  }

  .z-preview_upload_list {
    .ant-form-item {
      .ant-form-item-label {
        visibility: hidden;
      }
    }
  }

  .z-preview_upload_list:nth-of-type(1) {
    .ant-form-item {
      .ant-form-item-label {
        visibility: visible;
      }
    }
  }
}

.edit-column-model .main .middle-box .edit-ghost {
  width: 100%;
  height: 40px;
  background-color: #edf7ff !important;
  position: relative;
  line-height: 60px;
  list-style: none;
  font-size: 0;
  opacity: 1;
  border-width: 0 !important;
  z-index: 20;
  overflow: hidden;

  .z-preview,
  div,
  span,
  i {
    // 拖拽过程中，底层元素都不可见
    display: none;
  }

  &:after {
    display: block;
    position: absolute;
    content: "";
    left: 50%;
    top: 0px;
    transform: translate(-50%, -0%);
    width: 100%;
    height: 20px;
    opacity: 1;
    background-color: #edf7ff !important;
    border-bottom: 1px dashed #1f6ded;
    z-index: 2;
  }

  &:before {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    background-color: #edf7ff;
    content: "点击左侧字段并拖拽字段到此区域";
    left: 50%;
    top: 50%;
    height: 25px;
    padding: 0 30px;
    line-height: 25px;
    transform: translate(-50%, -50%);
    padding: 0 30px;
    color: #1f6ded;
    z-index: 3;
    font-size: 14px;
  }
}

.dragClass {
  background-color: #edf7ff;
  height: max-content !important;
  padding: 12px 0;

  .options {
    display: none;
  }

}

.activeComp {
  background-color: #edf7ff !important;
  width: 100% !important;

  .options {
    display: block !important;
  }
}
</style>
<style lang="scss">
.edit-column-model .ant-form-horizontal .ant-form-item-control {
  flex: unset;
}

#editContentModel {
  .z-preview {
    margin: 12px 0;
    position: relative;
    width: 100%;

    .ant-form-item {
      display: flex;
      flex-direction: column;
      padding-right: 12px;
      margin-left: 12px !important;

      .ant-form-item-label {
        width: auto;
        text-align: left;
      }

      .ant-input-affix-wrapper {
        width: 100% !important;

        .ant-form-item .ant-cascader-picker {
          width: 100%;
        }
      }
    }
  }

  .edit-item_list_id {
    display: flex;
    padding: 0 12px;
    background: #fff;

    .z-preview_list {
      width: calc(50%);
      position: relative;

      &:hover {
        position: relative;

        &::after {
          position: absolute;
          content: "";
          left: 50%;
          top: 0px;
          transform: translate(-50%, -0%);
          width: 100%;
          height: 100%;
          opacity: 0.4;
          z-index: 100;
          background: #fafafa;
        }
      }

      .ant-form-item {
        display: flex;
        flex-direction: column;
        padding: 0 12px;
        margin-left: 0px !important;

        .ant-form-item-label {
          width: auto;
          text-align: left;
        }

        .ant-input-affix-wrapper {
          width: 100% !important;
        }
      }
    }

    // .z-preview_list:nth-of-type(2n-1) {
    //   padding-left: 24px;
    // }

    .activeComp_list {
      background-color: #edf7ff;

      &:hover {
        position: relative;

        &::after {
          position: absolute;
          content: "";
          left: 50%;
          top: 0px;
          transform: translate(-50%, -0%);
          width: 100%;
          height: 100%;
          opacity: 0.4;
          z-index: 100;
          background: transparent;
        }
      }

      .options {
        display: block;
      }
    }
  }



}

// upload 相关css 样式

#upload_list {
  position: relative;
  padding: 0 12px;

  &:hover {
    .deleteEle_mutip {
      display: flex;
    }
  }

  .deleteEle_mutip {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
    padding: 0 8px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.07);
    border-radius: 50px;
    z-index: 902;
    cursor: pointer;
    display: none;

    .iconfont {
      color: rgba(0, 0, 0, 0.45);

      &:hover {
        color: rgba(0, 0, 0, 0.85);
      }
    }
  }
}

.draggable-left_upload_list {
  display: flex;
  position: relative;
  background: #fff;
  flex-wrap: wrap;

  #edit-item-upload-list {
    flex-wrap: wrap;
    background: #fff;

    &:hover {
      background-color: #fafafa;
    }

    .ant-form-item {
      display: flex;
      flex-direction: column;
      margin-left: 0px !important;
      width: 122px;
      padding-left: 6px;
      box-sizing: border-box;

      .ant-form-item-label {
        width: auto;
        text-align: left;
      }

      .ant-input-affix-wrapper {
        width: 100% !important;
      }
    }

    &:hover {
      .options {
        display: block;

        .deleteEle {
          display: flex;
        }
      }
    }

    .z-preview_upload_list {
      width: auto;
      padding-left: 6px;
      position: relative;
      padding-top: 4px;

      &::after {
        position: absolute;
        content: "";
        left: 50%;
        top: 0px;
        transform: translate(-50%, -0%);
        width: 100%;
        height: 100%;
        opacity: 1;
        z-index: 901;
      }

      .deleteEle {
        display: none;
      }

      .ant-form-item {
        display: flex;
        flex-direction: column-reverse;
      }
    }

    .activeComp_upload_list {
      background-color: #edf7ff !important;
      width: fit-content !important;
      height: 100%;

      .options {
        display: block;

        .deleteEle {
          display: flex;
          cursor: pointer;
          z-index: 902;
        }
      }

    }
  }
}

.edit-ghost_upload_list {
  padding: 0px;
}

.edit-chosenClass_upload_list {
  padding: 0px;
}

.dragClass_upload_list {
  background-color: #edf7ff;
  text-align: center;

  .z-preview_upload_list {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .options {
    display: none !important;
  }

  .ant-form-item {
    display: flex;
    flex-direction: column;
    margin-left: -24px;

    .ant-form-item-label {
      display: none;

    }
  }
}

.title_upload_list {
  padding: 12px 0 8px 12px;
  font-size: 14px;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.85);
  display: inline-block;
  background: #fff;
  width: 100%;
}

// 正文相关样式
.edit-column-model .main .middle-box .edit-item_contents_id {
  background: #fff;
  position: relative;
  padding: 0 12px;

  &:hover {
    .options {
      display: block;
    }
  }

  .downLoad_pic {
    position: relative;
    background: #fff;
    padding: 12px 0;
    margin-top: 12px;

    &::before {
      position: absolute;
      content: '';
      top: 0;
      width: 100%;
      height: 100%;
      background-color: #fff;
      opacity: 0.4;
      z-index: 903;
    }
  }

  .z-preview_uedit_list {
    &:hover {
      cursor: move;
      position: relative;

      &::before {
        position: absolute;
        content: '';
        top: 0;
        width: 100%;
        height: 100%;
        background-color: #fafafa;
        opacity: 0.4;
        z-index: 903;
      }
    }
  }

  .activeComp_uedit_list {
    position: relative;

    &::after {
      position: absolute;
      content: '';
      top: 0;
      width: 100%;
      height: 100%;
      background-color: #edf7ff;
      opacity: 0.6;
      z-index: 1000;
    }
  }
}

.ant-upload-picture-card-wrapper {
  width: 104px;
}

.edit-item_contents_id {
  .z-preview::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
  }
}

.edit_upload,
.edit-item_list_id {
  .z-preview::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
  }
}
</style>
